<script lang="ts">
import { ref } from "vue";
import { DwtUIOperations } from "./tools/dwtUIOperations";

import { RemoveCurrentPageDialog } from "./tools/removeCurrentPageDialog";
import { RemoveAllPagesDialog } from "./tools/removeAllPagesDialog";
import { useGlobalStore } from "@/stores/modules/global";
import { useDictionryStore } from "@/stores/modules/dictionary";
import openedFolder from "@/assets/imgs/opened_folder.png";
import closedFolder from "@/assets/imgs/folder.png";
import axios from "axios";
import mittBus from "@/utils/mittBus";

let dlgRemoveCurrent: RemoveCurrentPageDialog, dlgRemoveAll: RemoveAllPagesDialog;
const globalStore = useGlobalStore();
const store = useDictionryStore();

export default {
  props: {
    dwtUtil: {
      required: true,
      type: DwtUIOperations
    },
    showUpload: {
      type: Boolean,
      default: false
    }
  },

  setup(porps) {
    dlgRemoveCurrent = new RemoveCurrentPageDialog(porps.dwtUtil as DwtUIOperations);
    dlgRemoveAll = new RemoveAllPagesDialog(porps.dwtUtil as DwtUIOperations);
  },

  data() {
    return {
      globalStore,
      nodeDrawer: false,
      openedFolder,
      closedFolder,
      store,
      nodes: []
    };
  },
  created() {
    console.log("porps", this.showUpload);
    this.getTreeNodeData();
  },
  mounted() {
    mittBus.on("refreshEditBarNodes", () => {
      this.getTreeNodeData();
    });
  },
  methods: {
    selectNode(node: any) {
      // 选中节点上传部分文件目录及文件名联动
      mittBus.emit("dialogSelectedNodes", node);
    },
    refreshNodes() {
      this.getTreeNodeData();
    },
    // 出路节点数据
    adaptTreeData(apiData: any) {
      return (apiData.Children || []).map((item: any) => ({
        label: item.Name,
        name: item.Name,
        path: item.Path,
        isDirectory: item.IsDirectory,
        size: item.Size,
        children: item.IsDirectory ? this.adaptTreeData(item) : null,
        rawData: item
      }));
    },
    // 请求节点数据
    getTreeNodeData() {
      axios
        .get("api/api/MasterFile/files", {
          params: {
            path: "",
            recursive: true
          }
        })
        .then((res: any) => {
          console.log("treeData----1", res);
          this.nodes = this.adaptTreeData(res.data);
        });
    },
    clickbtnZoomOut() {
      this.dwtUtil?.onclickZoomOut();
    },
    clickbtnZoomIn() {
      this.dwtUtil?.onclickZoomIn();
    },
    clickbtnOrigSize() {
      this.dwtUtil?.onclickOrigSize();
    },
    clickbtnFitWindow() {
      this.dwtUtil?.onclickFitWindow();
    },
    clickbtnRotateLeft() {
      this.dwtUtil?.onclickRotateLeft();
    },
    clickbtnCrop() {
      this.dwtUtil?.onclickCrop();
    },
    clickbtnShowImageEditor() {
      this.dwtUtil?.onclickShowImageEditor();
    },
    clickbtnSelect() {
      this.dwtUtil?.onclickSelect();
    },
    clickbtnHand() {
      this.dwtUtil?.onclickHandButton();
    },
    clickbtnRemoveCurrentImage() {
      dlgRemoveCurrent?.remove();
    },
    clickbtnRemoveAllImages() {
      dlgRemoveAll?.removeAll();
    }
  }
};
</script>

<template>
  <div id="divEdit" :style="`background-color: ${globalStore.primary}`">
    <ul class="operateGrp">
      <li>
        <div
          class="menuIcon RemoveSelectedImages"
          style="margin-left: 5px"
          title="移出当前页"
          alt="移出当前页"
          id="DW_btnRemoveCurrentImage"
          @click="clickbtnRemoveCurrentImage()"
        ></div>
      </li>
      <li>
        <div
          class="menuIcon RemoveAllImages"
          title="清空扫描队列"
          alt="清空扫描队列"
          id="DW_btnRemoveAllImages"
          @click="clickbtnRemoveAllImages()"
        ></div>
      </li>
      <li class="nodeTreeWrap" style="width: 90px">
        <!-- <el-icon @click="nodeDrawer = true"><Coin /></el-icon> -->
        <i v-if="!showUpload" class="iconfont icon-shujiediantubiao" title="文件扫描节点" @click="nodeDrawer = true"></i>
      </li>
      <li class="lblShowCurrentImage">
        <input type="text" size="2" id="DW_CurrentImage" readonly="true" />/<input
          type="text"
          size="2"
          id="DW_TotalImage"
          readonly="true"
        />
      </li>
      <li class="lblZoom" :style="`border-color: #fff`">
        <ul>
          <li style="width: 25%">
            <div class="menuIcon ZoomOut" title="缩小显示" alt="缩小显示" id="btnZoomOut" @click="clickbtnZoomOut()"></div>
          </li>
          <li style="width: 50%"><input type="text" id="DW_spanZoom" readonly="true" /></li>
          <li style="width: 25%">
            <div class="menuIcon ZoomIn" title="放大显示" alt="放大显示" id="btnZoomIn" @click="clickbtnZoomIn()"></div>
          </li>
        </ul>
      </li>
      <li>
        <div
          style="margin-left: 10px"
          class="menuIcon OrigSize"
          title="1:1"
          alt="1:1"
          id="btnOrigSize"
          @click="clickbtnOrigSize()"
        ></div>
        <div
          class="menuIcon FitWindow"
          title="窗口适配"
          alt="窗口适配"
          id="btnFitWindow"
          style="display: none"
          @click="clickbtnFitWindow()"
        ></div>
      </li>
      <li style="width: 50px"></li>
      <li>
        <div class="menuIcon RotateLeft" title="逆时针旋转" alt="逆时针旋转" id="btnRotateL" @click="clickbtnRotateLeft()"></div>
      </li>
      <li>
        <div class="menuIcon grayimg Crop" title="请框选裁剪范围" alt="请框选裁剪范围" id="btnCropGray"></div>
        <div class="menuIcon Crop" title="Crop" alt="Crop" id="btnCrop" style="display: none" @click="clickbtnCrop()"></div>
      </li>
      <li>
        <div
          class="menuIcon ShowEditor"
          title="显示图像处理面板"
          alt="显示图像处理面板"
          id="btnShowImageEditor"
          @click="clickbtnShowImageEditor()"
        ></div>
      </li>
      <li style="margin-top: 0">
        <div class="menuIcon SelectSelected" title="区域选择工具" alt="Select" id="btnSelect_selected"></div>
        <div
          class="menuIcon Select"
          style="display: none"
          title="区域选择工具"
          alt="Select"
          id="btnSelect"
          @click="clickbtnSelect()"
        ></div>
      </li>
      <li style="margin-top: 0">
        <div class="menuIcon HandSelected" style="display: none" title="视图平移工具" alt="Hand" id="btnHand_selected"></div>
        <div class="menuIcon Hand" title="视图平移工具" alt="Hand" id="btnHand" @click="clickbtnHand()"></div>
      </li>
    </ul>
    <el-drawer v-model="nodeDrawer" title="文件扫描节点" direction="rtl" :size="260">
      <el-tree
        v-if="nodeDrawer"
        ref="treeRef"
        :data="nodes"
        :props="{
          children: 'children',
          label: 'name'
        }"
        node-key="name"
        highlight-current
        @node-click="selectNode"
      >
        <template #default="{ data, node }">
          <div class="parent-node" :title="data.name">
            <img
              v-if="data.isDirectory"
              :src="node.expanded ? openedFolder : closedFolder"
              style="width: 16px; margin-right: 5px"
            />
            <img v-else src="@/assets/imgs/file.png" style="width: 16px; margin-right: 5px" />
            <span>{{ data.name }}</span>
          </div>
        </template>
      </el-tree>
    </el-drawer>
  </div>
</template>

<style lang="scss">
// .SelectSelected:before {
//   content: "";
// }
.nodeTreeWrap {
  font-size: 26px;
  text-align: left !important;
  .icon-shujiediantubiao {
    display: block;
    margin-top: -5px;
    margin-left: 4px;
    font-size: 24px;
  }
  .el-icon {
    margin: -2px 0 0 8px;
  }
}
.el-tree-node__expand-icon {
  color: var(--el-color-primary);
}
.SelectSelected::before {
  display: inline-block;
  width: 43px;
  height: 38px;
  content: "";
  background-image: url("@/assets/images/select.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
</style>
